@import "../../shared";

.plan-features-2023-grid__header {
	display: flex;
	position: relative;
	align-items: flex-start;
	padding-inline: 20px 0;
	padding-block: 0 8px;
	background-color: var(--color-surface);
	justify-content: flex-start;
	font-weight: 400;
}

.plan-features-2023-grid__header-logo {
	padding-left: 20px;

	@include plans-grid-medium-large {
		margin-top: 32px;
	}

	.plan-features-2023-grid__table-top & {
		@include plans-grid-large {
			margin-top: 62px;
		}
	}
}

.plan-features-2023-grid__plan-logo {
	margin-bottom: 9px;
}

.plan-features-2023-grid__header-text {
	flex: 1;
	padding: 6px 0 0;
}

.plan-features-2023-grid__actions-signup-plan-text {
	display: block;
}

.plan-features-2023-grid__actions-downgrade-context-mobile {
	font-size: $font-body-extra-small;
	margin-top: 10px;
}

.plans-grid-next-features-grid__mobile-plan-card-foldable-container {
	&.foldable-card.card {
		box-shadow: unset;
		margin-top: 24px;

		.foldable-card__main {
			font-weight: 500;
			font-size: $font-body-small;
			letter-spacing: -0.24px;
			line-height: 20px;

			* {
				color: inherit;
			}

			.foldable-card__expand .gridicon {
				width: 14px;
				fill: currentColor;
			}
		}

		&.is-compact .foldable-card__header {
			padding: 0 20px;
		}

		&.is-expanded {
			margin-top: 24px;

			.foldable-card__content {
				border-top: none;
				padding: 12px 0 0;
			}
		}

		.plans-grid-next-features-grid__mobile-plan-card.is-free-plan & {
			.foldable-card__main {
				color: var(--studio-blue-50);
			}
		}

		.plans-grid-next-features-grid__mobile-plan-card.is-personal-plan & {
			.foldable-card__main {
				color: var(--studio-blue-60);
			}
		}

		.plans-grid-next-features-grid__mobile-plan-card.is-premium-plan & {
			.foldable-card__main {
				color: var(--studio-blue-70);
			}
		}

		.plans-grid-next-features-grid__mobile-plan-card.is-business-plan & {
			.foldable-card__main {
				color: var(--studio-woocommerce-purple-50);
			}
		}

		.plans-grid-next-features-grid__mobile-plan-card.is-ecommerce-plan & {
			.foldable-card__main {
				color: var(--studio-woocommerce-purple-60);
			}
		}

		.plans-grid-next-features-grid__mobile-plan-card.is-wpcom-enterprise-plan & {
			.foldable-card__main {
				color: var(--studio-gray-80);
			}
		}
	}
}

.plans-grid-next-features-grid__mobile-plan-card-no-foldable-container {
	margin-top: 24px;
}

.plan-features-2023-grid__mobile-view {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	margin: 0 auto;
	max-width: $mobile-card-max-width;

	.plans-grid-next-features-grid__mobile-plan-card {
		background-color: var(--studio-white);
		border: 1px solid #e0e0e0;
		/* stylelint-disable-next-line */
		border-radius: 5px;
		padding: 38px 0 20px 0;

		/*
		 * TODO: Remove/refactor this once we have a better way to handle.
		 * .is-section-plans refers to external context.
		 */
		@include plans-grid-medium-large {
			.is-section-plans & {
				margin-left: 0;
				margin-right: 0;
			}
		}

		&:first-of-type {
			margin-top: 0;
		}

		.plan-features-2023-grid__table-item {
			.plans-grid-next-plan-storage {
				padding-top: 0;
			}
		}
	}

	.plan-features-2023-grid__highlighted-feature .plan-features-2023-grid__item {
		padding-bottom: 24px;
	}
}

.plan-features-2023-grid__table {
	font-size: $font-body-small;
	color: var(--color-text-subtle);
	table-layout: fixed;
	border: 1px solid #e0e0e0;
	border-radius: 5px; /* stylelint-disable-line */
	background-color: #fff;
	margin: 0 auto;
	border-spacing: 0;
	width: 100%;

	&.has-highlighted-plan {
		// margin (not padding) to not break internal borders/layout
		margin-top: 35px; // enough to cover `plans-grid__popular-badge` repositioning (top: -35px)
	}

	&.has-1-cols {
		max-width: $table-cell-max-width;
	}

	&.has-2-cols {
		max-width: $table-cell-max-width * 2;
	}

	&.has-3-cols {
		max-width: $table-cell-max-width * 3;
	}

	&.has-4-cols {
		max-width: $table-cell-max-width * 4;
	}
}

.plan-features-2023-grid__header-title {
	margin-top: 0;
	margin-bottom: 5px;
	font-size: $font-title-large;
	line-height: 0.7;
	color: var(--studio-gray-100);
	font-weight: 400;
	@include onboarding-font-recoleta;
	letter-spacing: 0;
}

.plan-features-2023-grid__header-tagline {
	font-size: $font-body;
	line-height: 24px;
	color: var(--studio-gray-80);
	font-weight: 400;
	padding: 0 20px 24px 20px;
	margin-bottom: 0;

	@include plans-grid-medium-large {
		font-size: $font-body-small;
		line-height: 20px;
	}

	@include plans-grid-large {
		font-size: 0.813rem; /* stylelint-disable-line */
		line-height: 16px;
		padding-bottom: 8px;
		min-height: 50px;
		text-wrap: balance;
	}
}

.plan-features-2023-grid__table-item {
	text-align: left;
	transition: opacity 0.05s;
	border: none;
	background-color: var(--color-surface);
	position: relative;
	vertical-align: top;

	.is-bold {
		font-weight: 600;
	}

	&.is-top-buttons {
		padding: 0 20px;
		@include plans-grid-medium-large {
			button {
				margin-top: 16px;
				margin-bottom: 16px;
			}
		}
	}

	@include plans-grid-medium-large {
		// The .plan-features-2023-grid__table-item is used to render the plan spotlight which doesn't
		// use a table layout, but borders are only appropriate in table layout.
		&:is(td, th) {
			border-left: solid 1px #e0e0e0;
		}
	}
}

.plan-features-2023-grid__desktop-view,
.plan-features-2023-grid__tablet-view {
	.plan-features-2023-grid__table-item {
		max-width: $table-cell-max-width;
	}
}

.plan-features-2023-grid__plan-spotlight {
	background-color: var(--studio-white);
	position: relative;
	max-width: 100%;
	margin-bottom: 64px;
	border: 1px solid #e0e0e0;
	/* stylelint-disable-next-line scales/radii */
	border-radius: 5px;
	display: flex;
	justify-content: space-between;

	div.spotlight-plan__buttons  {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	div.plan-features-2023-grid__table-item {
		border: none;

		&.plan-features-2023-grid__header-billing-info {
			padding-bottom: 16px;

			@include plans-grid-medium-large {
				padding-bottom: 16px;
			}
		}

		&.popular-plan-parent-class .plan-features-2023-grid__popular-badge {
			padding-bottom: 23px;
			@include plans-grid-medium-large {
				position: unset;
				border: none;
			}
		}

		.plan-features-2023-grid__header-title {
			margin-top: 24px;
		}

		.plan-features-2023-grid__header-tagline {
			min-height: 0;
			padding-bottom: 16px;
		}

		.plan-features-2023-grid__header-logo {
			display: none;
		}
	}
}

.plans-grid-next-features-grid__feature-group-title {
	font-weight: 600;
	color: var(--studio-gray-80);

	&.is-wordpress-hosting {
		padding-top: 12px;
		font-size: 12px;
	}
}

.plans-grid-next-features-grid__feature-group-row {
	> .plan-features-2023-grid__table-item {
		padding-top: 24px;
	}

	/**
	 * This is only relevant to match the styling for the Enterprise plan's parter logos,
	 * which should probably be cleaned-up/refactored instead
	 */
	&.is-first-feature-group-row > .plan-features-2023-grid__table-item {
		@include plans-grid-medium-large {
			padding-top: 14px;
		}
	}

	&.is-reduced-feature-group-spacing > .plan-features-2023-grid__table-item {
		padding-top: 0;
	}
}

.plan-features-2023-grid__item-info {
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	width: 100%;

	.plan-features-2023-grid__item-title {
		color: var(--studio-gray-80);
		font-size: $font-body-small;
		font-weight: 400;
		line-height: 20px;
		overflow-wrap: break-word;
		text-wrap: balance; // Fallback until Safari supports `pretty`.
		text-wrap: pretty;
		margin: 0;
		flex: 1 0 0;
		width: 100%;

		&.is-bold {
			font-weight: 600;
		}

		@include plans-grid-medium-large {
			font-size: $font-body-extra-small;
			line-height: 16px;
		}
	}

	&:not(.is-available) {
		color: var(--studio-gray-20);

		.plan-features-2023-grid__item-title {
			text-decoration: line-through;
		}
	}

	.plan-features-2023-grid__item-sub-feature-list {
		margin-bottom: 0;
		& > li {
			margin-top: 8px;
		}
	}
}

.plan-features-2023-grid__row:last-of-type .plan-features-2023-grid__table-item {
	border-bottom: solid 1px var(--color-neutral-5);

	&.is-last-feature {
		.plan-features-2023-grid__item-info {
			padding-bottom: 30px;
		}
	}
}

.plan-features-2023-grid__item {
	padding: 0 20px 12px;
	text-align: left;

	&.plan-features-2023-grid__item-available {
		display: flex;
		flex-direction: column;
		position: relative;

		& .plan-features-2023-grid__item-info-container {
			display: flex;
		}
	}

	.plan-features-2023-grid__common-title + & {
		padding-top: 24px;

		@include plans-grid-medium-large {
			padding-top: 14px;
		}
	}
}

.plan-features-2023-grid__item-logos {
	padding-top: 28px;

	@include plans-grid-medium-large {
		margin-right: -16px;
		padding-top: 18px;
	}
}

.plan-features-2023-grid__content {
	.plan-features-2023-grid__table-bottom {
		margin-top: 54px;
	}
}


/* stylelint-disable-next-line no-duplicate-selectors */
.plan-features-2023-grid__table-item {
	.plan-features-2023-grid__common-title {
		@include plans-grid-medium-large {
			margin-top: 20px;
			font-size: $font-body-extra-small;
		}
	}

	&.plan-features-2023-grid__header-billing-info {
		@include plans-grid-medium-large {
			padding-bottom: 0;
		}
	}

	&.popular-plan-parent-class {
		.plan-features-2023-grid__popular-badge {
			@include plans-grid-medium-large {
				position: absolute;
				top: -35px; // at -35px this covers the top border of the table, including its top-right radius, as intended
				right: -1px;
				border-color: #e0e0e0;
				border-width: 1px 1px 0 1px;
				/* stylelint-disable-next-line scales/radii */
				border-radius: 5px 5px 0 0;
				border-style: solid;
				padding-top: 20px;
				margin-bottom: 0;

				.plans-grid__plan-pill {
					transform: translate(20px, 0);
				}
			}
		}
	}
}

/**
 * TODO clk consolidate with the rest above
 */
.plans-grid-next {
	// insignificant padding important to prevent parent/child margins from collapsing
	// creates a barrier between parent/child elements
	// the alternative (oveflow: auto) would break the sticky behavior on the headers
	padding: 1px;

	.plan-features-2023-grid__table-item {
		border-right: none;
		background-color: transparent;

		// The extra `:is(td)` is needed so this rule is at the same specificity as the rule
		// which originally added the border-left, which uses an `:is` selector.
		&:first-of-type:is(td) {
			border-left: none;
		}

		&.plan-features-2023-grid__header-billing-info {
			color: var(--studio-gray-50);
			font-weight: 400;
			font-size: $font-body-extra-small;
			padding: 0 19px 24px 20px;
		}

		&.popular-plan-parent-class {
			position: relative;

			.plan-features-2023-grid__popular-badge {
				margin-bottom: 24px;
				width: 100%;
				background: #fff;
				color: #fff;
				padding: 0 0 17px;

				.plans-grid__plan-pill {
					font-family: Inter, $sans;
					font-size: 0.75rem;
					font-weight: 500;
					color: var(--studio-white);
					letter-spacing: 0.2px;
					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
					line-height: 1.25rem;
					padding: 0 9px;
					right: unset;
					left: unset;
					top: unset;
					bottom: 0;
					border-radius: 4px;
					background-color: var(--studio-gray-80);
					transform: translate(20px, -50px);
					text-transform: unset;
				}

				&:not(.with-plan-logo) {
					.plans-grid__plan-pill {
						transform: translate(20px, 0);
					}
				}

				&.is-current-plan {
					color: unset;
					.plans-grid__plan-pill {
						background: #e0e0e0;
						color: var(--studio-gray-100);
					}
				}
			}

			&.is-left-of-highlight {
				&:not(.is-last-in-row) {
					.plan-features-2023-grid__popular-badge {
						border-top-right-radius: 0;
					}
				}
			}
			&.is-right-of-highlight {
				&:not(.is-first-in-row) {
					.plan-features-2023-grid__popular-badge {
						border-top-left-radius: 0;
					}
				}
			}
		}

		.plan-features-2023-grid__jp-logo {
			padding: 24px 0 6px 20px;
		}

		&.plans-grid-next-plan-storage {
			padding: 24px 20px 38px 20px;
		}

		.plan-features-2023-grid__common-title {
			font-weight: 600;
			font-size: $font-body-small;
			padding: 0 20px;

			&.is-personal-plan {
				color: var(--studio-blue-60);
			}

			&.is-premium-plan {
				color: var(--studio-blue-70);
			}

			&.is-business-plan {
				color: var(--studio-woocommerce-purple-50);
			}

			&.is-ecommerce-plan {
				color: var(--studio-woocommerce-purple-60);
			}

			&.is-wpcom-enterprise-grid-plan {
				color: var(--studio-gray-80);
			}
		}
	}

	.is-sticky-top-buttons-row {
		.is-top-buttons.plan-features-2023-grid__table-item {
			border: none;
			background-color: #f9f9f9;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04);
		}
	}

	.plan-features-2023-grid__header {
		background-color: transparent;
	}

	.plan-features-2023-grid__row:last-of-type .plan-features-2023-grid__table-item {
		border-bottom: none;
	}

	.plan-features-2023-grid__item.plan-features-2023-grid__item-available {
		.plan-features-2023-grid__item-annual-plan-container
		.plan-features-2023-grid__item-annual-plan {
			color: var(--studio-orange-40);
		}
	}
}

// Conditional styles for visual split layout (website-builder and wordpress-hosting intents)
.plans-features-main__group.is-visual-split-layout {
	.plans-grid-next-features-grid__feature-group-row {
		&:last-child > .plan-features-2023-grid__table-item {
			padding-bottom: 18px;
		}
	}
}
